<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>echarts.js调用echarts进行图表绘制案例</title>
    <script type="text/javascript" src='/echarts/echart.js'></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div id="chart" style="width:400px;height:400px;"></div>
<button type="button" id="show" class="layui-btn layui-btn-normal">show</button>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定义一个标题
        title:{
            text:'AI学习热度'
        },
        legend:{
            data:['数量']
        },
        //X轴设置
        xAxis:{
            data:[]

        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'销量',
            type:'bar',
            data:[]
        }]

    };
    myChart.setOption(options);
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
</script>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script>
    $(function(){
        $("#show").click(function () {
            var names=['ML','DL','TL','RL','DL-GAN'];
            var val=['12','32','45','78','60'];
            var myChart = echarts.init(document.getElementById('chart'));
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name:'销量',
                    data: val
                }]
            });

        });

    });
</script>
</html>